<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport"
		content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<title>3dtiles</title>
	<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
	<script src="../Build/Cesium/Cesium.js"></script>
	<style>
		html,
		body,
		#cesiumContainer {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
	</style>

</head>

<body>
	<div id="cesiumContainer"></div>
	<script>
		let mapbox = new Cesium.MapboxImageryProvider({
			mapId: 'mapbox.dark',
			accessToken: 'pk.eyJ1IjoieW91bmdnaXMiLCJhIjoiY2o5Z3owdTViMnR5djJ3bGczaGw4ODdhZSJ9.K7Zmkra18V7CuynSW3rlRQ'
		});

		let viewer = new Cesium.Viewer('cesiumContainer', {
			imageryProvider: mapbox,
			contextOptions: {
				webgl: {
					alpha: true
				}
			},
			selectionIndicator: false,
			animation: false, //是否显示动画控件
			baseLayerPicker: false, //是否显示图层选择控件
			geocoder: false, //是否显示地名查找控件
			timeline: false, //是否显示时间线控件
			sceneModePicker: false, //是否显示投影方式控件
			navigationHelpButton: false, //是否显示帮助信息控件
			infoBox: false, //是否显示点击要素之后显示的信息
			fullscreenButton: false,
			shouldAnimate: true //动画播放
		});

		//取消双击事件
		//viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
		//设置homebutton的位置
		Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
			Cesium.Rectangle.fromDegrees(116.15, 40.54, 116.25, 40.56); //Rectangle(west, south, east, north)
		//设置初始位置
		viewer.camera.setView({
			destination: Cesium.Cartesian3.fromDegrees(116.20, 40.55, 3000000)
		});

		//开启深度检测
		//viewer.scene.globe.depthTestAgainstTerrain = true;

		let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
			url: '../Source/3DTiles/building_1/tileset.json' // '../Source/3DTiles/building/tileset.json'
		}));

		//			let heightStyle = new Cesium.Cesium3DTileStyle({
		//				color: "color('blue', 0.3)",
		//				show: true
		//			});
		let heightStyle = new Cesium.Cesium3DTileStyle({
			color: {
				conditions: [
					['${height} >= 300', 'rgba(45, 0, 75, 0.3)'],
					['${height} >= 200', 'rgba(102, 71, 151, 0.3)'],
					['${height} >= 100', 'rgba(170, 162, 204, 0.3)'],
					['${height} >= 50', 'rgba(224, 226, 238, 0.3)'],
					['${height} >= 25', 'rgba(252, 230, 200, 0.3)'],
					['${height} >= 10', 'rgba(248, 176, 87, 0.3)'],
					['${height} >= 5', 'rgba(198, 106, 11, 0.3)'],
					['true', 'rgba(127, 59, 8, 0.3)']
				]
			}
		});
		//tileset.style = heightStyle;
		//viewer.scene.primitives.add(tileset);

		tileset.readyPromise.then(function (tileset) {
			viewer.scene.primitives.add(tileset);
			viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0));
		}).otherwise(function (error) {
			console.log(error);
		});

	</script>
</body>

</html>